import React, { useMemo } from 'react';
import * as echarts from 'echarts';
import EChart from '../EChart';

// 柱状图组件
export const BarChart: React.FC = () => {
  const option = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis' as const,
      axisPointer: {
        type: 'shadow' as const
      },
      textStyle: {
        color: '#000000',
        fontSize: 12
      }
    },
    legend: {
      data: ['抓取量', '发布量', '互动量'],
      textStyle: { color: '#000000', fontSize: 13, fontWeight: 'bold' as const },
      top: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category' as const,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: { lineStyle: { color: '#5a7a9a' } },
      axisLabel: { 
        color: '#000000', 
        fontSize: 12,
        fontWeight: 'bold' as const
      }
    },
    yAxis: {
      type: 'value' as const,
      axisLine: { lineStyle: { color: '#5a7a9a' } },
      axisLabel: { 
        color: '#000000', 
        fontSize: 12,
        fontWeight: 'bold' as const
      },
      splitLine: { lineStyle: { color: '#2a4a6a', type: 'dashed' as const } }
    },
    series: [
      {
        name: '抓取量',
        type: 'bar' as const,
        barGap: 0,
        data: [320, 332, 301, 334, 390, 330, 320],
        itemStyle: { color: '#5da8ff' }
      },
      {
        name: '发布量',
        type: 'bar' as const,
        data: [220, 182, 191, 234, 290, 330, 310],
        itemStyle: { color: '#2ed573' }
      },
      {
        name: '互动量',
        type: 'bar' as const,
        data: [150, 232, 201, 154, 190, 330, 410],
        itemStyle: { color: '#ff4757' }
      }
    ]
  }), []);

  return (
    <div style={{ height: '300px' }}>
      <EChart option={option} height="100%" />
    </div>
  );
};

// 折线图组件
export const LineChart: React.FC = () => {
  const option = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis' as const,
      textStyle: {
        color: '#000000',
        fontSize: 12
      }
    },
    legend: {
      data: ['用户增长', '内容增长'],
      textStyle: { color: '#000000', fontSize: 13, fontWeight: 'bold' as const },
      top: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category' as const,
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLine: { lineStyle: { color: '#5a7a9a' } },
      axisLabel: { 
        color: '#000000', 
        fontSize: 12,
        fontWeight: 'bold' as const
      }
    },
    yAxis: {
      type: 'value' as const,
      axisLine: { lineStyle: { color: '#5a7a9a' } },
      axisLabel: { 
        color: '#000000', 
        fontSize: 12,
        fontWeight: 'bold' as const
      },
      splitLine: { lineStyle: { color: '#2a4a6a', type: 'dashed' as const } }
    },
    series: [
      {
        name: '用户增长',
        type: 'line' as const,
        data: [120, 132, 101, 134, 90, 230],
        smooth: true,
        lineStyle: { color: '#5da8ff', width: 2 },
        itemStyle: { color: '#5da8ff' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(93, 168, 255, 0.3)' },
            { offset: 1, color: 'rgba(93, 168, 255, 0.05)' }
          ])
        }
      },
      {
        name: '内容增长',
        type: 'line' as const,
        data: [220, 182, 191, 234, 290, 300],
        smooth: true,
        lineStyle: { color: '#2ed573', width: 2 },
        itemStyle: { color: '#2ed573' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(46, 213, 115, 0.3)' },
            { offset: 1, color: 'rgba(46, 213, 115, 0.05)' }
          ])
        }
      }
    ]
  }), []);

  return (
    <div style={{ height: '300px' }}>
      <EChart option={option} height="100%" />
    </div>
  );
};

// 饼图组件
export const PieChart: React.FC = () => {
  const option = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item' as const,
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      textStyle: {
        color: '#000000',
        fontSize: 12
      }
    },
    legend: {
      orient: 'vertical' as const,
      left: 'left' as const,
      textStyle: { color: '#000000', fontSize: 13, fontWeight: 'bold' as const },
      data: ['抖音', '快手', '小红书', '微博', '其他']
    },
    series: [
      {
        name: '平台分布',
        type: 'pie' as const,
        radius: '70%',
        center: ['60%', '50%'],
        itemStyle: {
          borderRadius: 5,
          borderColor: '#1a1a2e',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{c} ({d}%)',
          color: '#000000',
          fontSize: 12,
          fontWeight: 'bold' as const
        },
        data: [
          { value: 1048, name: '抖音', itemStyle: { color: '#ff4757' } },
          { value: 735, name: '快手', itemStyle: { color: '#ffa502' } },
          { value: 580, name: '小红书', itemStyle: { color: '#ffd32a' } },
          { value: 484, name: '微博', itemStyle: { color: '#2ed573' } },
          { value: 300, name: '其他', itemStyle: { color: '#5da8ff' } }
        ]
      }
    ]
  }), []);

  return (
    <div style={{ height: '300px' }}>
      <EChart option={option} height="100%" />
    </div>
  );
};

// 雷达图组件
export const RadarChart: React.FC = () => {
  const option = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        color: '#000000',
        fontSize: 12
      }
    },
    legend: {
      data: ['平台表现'],
      textStyle: { color: '#000000', fontSize: 13, fontWeight: 'bold' as const },
      top: 10
    },
    radar: {
      indicator: [
        { name: '用户活跃度', max: 100 },
        { name: '内容质量', max: 100 },
        { name: '互动率', max: 100 },
        { name: '增长潜力', max: 100 },
        { name: '商业价值', max: 100 }
      ],
      axisLine: { lineStyle: { color: '#5a7a9a' } },
      splitLine: { lineStyle: { color: '#2a4a6a' } },
      splitArea: { show: false },
      axisLabel: {
        color: '#000000',
        fontSize: 11,
        fontWeight: 'bold' as const
      }
    },
    series: [{
      name: '平台表现',
      type: 'radar' as const,
      data: [
        {
          value: [80, 75, 85, 90, 70],
          name: '平台表现',
          itemStyle: { color: '#5da8ff' },
          lineStyle: { color: '#5da8ff' },
          areaStyle: { color: 'rgba(93, 168, 255, 0.3)' }
        }
      ]
    }]
  }), []);

  return (
    <div style={{ height: '300px' }}>
      <EChart option={option} height="100%" />
    </div>
  );
};